<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<button>第一页</button>
<button>第二页</button>
<button>第三页</button>
<ul></ul>
<script src="./get.js"></script>
<script>
    let t = null
    document.querySelectorAll('button').forEach((item,i)=>
    {
        item.onclick=function()
        {
            getFilms(i+1)
        }
    })
    function getFilms(pageNum)
    {
        if(t) return
        get(
            'https://m.maizuo.com/gateway',
            `cityId=310100&pageNum=${pageNum}&pageSize=10&type=1&k=3576785`,
            res=>{
                let ulObj = document.querySelector('ul')
                ulObj.innerHTML=''
                if(!Array.isArray(res.data.films)) return
                    res.data.films.forEach(item => 
                    {
                        let liObj = document.createElement('li')
                        liObj.innerHTML=
                        `
                        <img src="${item.poster}" /> 
                        ${item.filmId} - 
                        ${item.name}
                        
                        `
                        ulObj.appendChild(liObj)
                    })
                },
            header=
            {
                'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"1640005088441707321622529","bc":"310100"}',
                'X-Host': 'mall.film-ticket.film.list',
                'X-Requested-With': 'XMLHttpRequest'
             })
        t=null
    }
</script>
</body>
</html>